import * as echarts from 'echarts';
import { getDateValue } from "../../../utils/date";
import moment from "moment";

export default function chart(chartDom: any, list: any) {
  if (!chartDom) return;
  let myChart = echarts.init(chartDom as HTMLElement)

  let { dateList, valueList } : any = getDateValue(
    Date.now() - 4 * 3600 * 1000,
    Date.now(),
    5 * 60 * 1000,
    list
  );

  dateList = dateList.map((it: any) => it.time);

  let option = {
    visualMap: [
      {
        show: false,
        seriesIndex: 0,
        min: 0,
        max: 400,
      }
    ],

    tooltip: {
      trigger: 'axis',
      formatter: (d: any) => {
        const start = moment(Number(d[0].name) - 5 * 60 * 1000).format('HH:mm')
        const end = moment(Number(d[0].name)).format('HH:mm')
        return `<div style="font-size: 13px">
        <div>${start}-${end}</div>
        <div style="margin-top: 6px">PV数：${d[0].value}</div>
      </div>`
      }
    },

    grid: {
      bottom: '20%',
      top: '20%',
      left: "4%",
      right: '4%'
    },

    xAxis: [
      {
        data: dateList,
        splitLine: {
          show: false
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#f5f5f5'
          }
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        }
      }
    ],

    yAxis: [
      {
        splitNumber: 2,
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: '#f7f5f5'
          },
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: '#f5f5f5'
          }
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        }
      }
    ],
    series: [
      {
        type: 'line',
        showSymbol: false,
        data: valueList,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgba(255, 118, 40)'
          }, {
            offset: 1,
            color: 'rgba(255, 255, 255)'
          }])
        },
        emphasis: {
          focus: 'series'
        },
      }
    ]
  }

  option && myChart.setOption(option)
}